import { defineComponent, onMounted, ref, onBeforeMount } from "vue";
import { useI18n } from "vue-i18n";
import './index.less'
import CustomBotton from "@/components/customBotton";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const num = ref<number>(1);
        const moveUpNum = ref<number>(0);
        let intervalId: any = null;
        onMounted(() => {
            intervalId = setInterval(() => {
                num.value++;
                if (num.value > 5) {
                    num.value = 1;
                }
            }, 5000);
        })
        onBeforeMount(() => {
            clearInterval(intervalId);
        })
        const selectNum = (nums: number) => {
            clearInterval(intervalId);
            num.value = nums;
            intervalId = setInterval(() => {
                num.value++;
                if (num.value > 5) {
                    num.value = 1;
                }
            }, 5000);
        }
        const lines = ['line1', 'line2', 'line3', 'line4', 'line5'];
        return () => (
            <div class='carousel5' style={{ backgroundImage: `url('/home/home_bg${num.value}.svg')` }}>
                <div class='carousel5_header'>
                    <div class='element' onMousemove={() => { moveUpNum.value = 1 }} onMouseleave={() => { moveUpNum.value = 0 }} onClick={() => selectNum(1)} >
                        {(num.value === 1 || moveUpNum.value === 1) && <div class='color1'></div>}
                        <span>{t('home.element1')}</span>
                    </div>
                    <div class='element' onMousemove={() => { moveUpNum.value = 2 }} onMouseleave={() => { moveUpNum.value = 0 }} onClick={() => selectNum(2)}>
                        {(num.value === 2 || moveUpNum.value === 2) && <div class='color2'></div>}
                        <span>{t('home.element2')}</span>
                    </div>
                    <div class='element' onMousemove={() => { moveUpNum.value = 3 }} onMouseleave={() => { moveUpNum.value = 0 }} onClick={() => selectNum(3)}>
                        {(num.value === 3 || moveUpNum.value === 3) && <div class='color3'></div>}
                        <span>{t('home.element3')}</span>
                    </div>
                    <div class='element' onMousemove={() => { moveUpNum.value = 4 }} onMouseleave={() => { moveUpNum.value = 0 }} onClick={() => selectNum(4)}>
                        {(num.value === 4 || moveUpNum.value === 4) && <div class='color4'></div>}
                        <span>{t('home.element4')}</span></div>
                    <div class='element' onMousemove={() => { moveUpNum.value = 5 }} onMouseleave={() => { moveUpNum.value = 0 }} onClick={() => selectNum(5)}>
                        {(num.value === 5 || moveUpNum.value === 5) && <div class='color5'></div>}
                        <span>{t('home.element5')}</span>
                    </div>
                </div>
                {
                    lines.map((line, index) => {
                        if (num.value === index + 1) {
                            return <div class={line} />;
                        }
                        return null;
                    })
                }
                <div class='carousel5_body'>
                    <div class={num.value === 1 ? 'body_left textAnimation' : 'textAnimation_none'}>
                        <div class='left_title exceed2'>{t('home.carouselTitle1')}</div>
                        <div class='left_centent exceed3'>{t('home.carouselContent1')}</div>
                        <CustomBotton title={t('home.free_experience')} className={'green'} />
                    </div>
                    <div class={num.value === 1 ? 'body_right textAnimation' : 'textAnimation_none'}><img src={`/home/back${num.value}.svg`} alt="" /></div>
                    <div class={num.value === 2 ? 'body_left textAnimation' : 'textAnimation_none'}>
                        <div class='left_title exceed2'>{t('home.carouselTitle2')}</div>
                        <div class='left_centent exceed3'>{t('home.carouselContent2')}</div>
                        <CustomBotton title={t('home.free_experience')} className={'orange'} />
                    </div>
                    <div class={num.value === 2 ? 'body_right textAnimation' : 'textAnimation_none'}><img src={`/home/back${num.value}.svg`} alt="" /></div>
                    <div class={num.value === 3 ? 'body_left textAnimation' : 'textAnimation_none'}>
                        <div class='left_title exceed2'>{t('home.carouselTitle3')}</div>
                        <div class='left_centent exceed3'>{t('home.carouselContent3')}</div>
                        <CustomBotton title={t('home.free_experience')} className={'dark_blue'} />
                    </div>
                    <div class={num.value === 3 ? 'body_right textAnimation' : 'textAnimation_none'}><img src={`/home/back${num.value}.svg`} alt="" /></div>
                    <div class={num.value === 4 ? 'body_left textAnimation' : 'textAnimation_none'}>
                        <div class='left_title exceed2'>{t('home.carouselTitle4')}</div>
                        <div class='left_centent exceed3'>{t('home.carouselContent4')}</div>
                        <CustomBotton title={t('home.free_experience')} className={'purple'} />
                    </div>
                    <div class={num.value === 4 ? 'body_right textAnimation' : 'textAnimation_none'}><img src={`/home/back${num.value}.svg`} alt="" /></div>
                    <div class={num.value === 5 ? 'body_left textAnimation' : 'textAnimation_none'}>
                        <div class='left_title exceed2'>{t('home.carouselTitle5')}</div>
                        <div class='left_centent exceed3'>{t('home.carouselContent5')}</div>
                        <CustomBotton title={t('home.free_experience')} className={'light_blue'} />
                    </div>
                    <div class={num.value === 5 ? 'body_right textAnimation' : 'textAnimation_none'}><img src={`/home/back${num.value}.svg`} alt="" /></div>
                </div>
            </div>
        );
    },
})